<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <div class="text-right">
            <el-button type="primary" @click="onInsert" :loading="loading"> 新增 </el-button>
        </div>
        <h1 class="text-center">采 购 单</h1>
        <el-row class="mt30">
            <el-col :span="16">采购项目部：<el-text>{{ project.title }}</el-text></el-col>
            <el-col :span="4">采购申请日期：</el-col>
            <el-col :span="4"> 申请人：{{ user.name }}</el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" border style="width: 100%;font-size: 16px;height: auto !important;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="70" align="center" />
            <el-table-column label="商品名称" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.title" />
                </template>
            </el-table-column>
            <el-table-column label="规格" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.specs" />
                </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.unit" />
                </template>
            </el-table-column>
            <el-table-column label="数量" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.sums" @change="onPrice(scope.$index)" />
                </template>
            </el-table-column>
            <el-table-column label="单价" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.unit_price" @change="onPrice(scope.$index)" />
                </template>
            </el-table-column>
            <el-table-column prop="price" label="合计" width="120" align="center" />
            <el-table-column label="使用部位" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.part_used" />
                </template>
            </el-table-column>
            <el-table-column label="申请班组（签字）" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.labor" />
                </template>
            </el-table-column>
            <el-table-column label="备注（采购批次）" align="center">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.batch" />
                </template>
            </el-table-column>
        </el-table>
        <div>
            <p>备注：1.班组长需要主材提前7~15工作日上报；辅助材料提前：3~7个工作日上报公司；</p>
            <p>　　　2.材料采购项目部必需审核；因错采、多采购造成损失班组、项目部各承担50%费用；</p>
            <p>　　　3.采购数量及批次要和前期采购计划吻合，避免运输费、搬运费增加；</p>
            <p>　　　4.材料验收由项目部和班组长共同验收；合格后项目部和班组长共同签字确认；材料由班组负责保管和维护。</p>
        </div>
        <div class="text-right">时  间： </div>
        <!-- <el-button type="primary" @click="onUpload" size="small">{{ ruleForm.files ? '查看' : '上传' }}</el-button> -->
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
    </div>

</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import router from '../../../router';
let isproject:any = sessionStorage.getItem('project')
const project = ref<any>(JSON.parse(isproject))

let isuser:any = sessionStorage.getItem('user')
const user = ref<any>(JSON.parse(isuser))

const indexMethod = (index: number) => {
  return index+= 1
}

const loading = ref<boolean>(false)
const id:any = ref(useRouter().currentRoute.value.params.id)



interface RuleForm {
    id:number
    project_id: number
    user_id: number
    title:string
    price: number
    specs: string
    unit: string
    sums: number
    unit_price: number
    remarks: string
    part_used: string
    labor: string
    batch: string
}
const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    title:'',
    project_id: 0,
    user_id: 0,
    price: 0,
    specs: '',
    unit: '',
    sums: 0,
    unit_price: 0,
    remarks: '',
    part_used: '',
    labor: '',
    batch:'',
})
const tableData = ref<RuleForm[]>([])

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.post('/material/details',{material_id:id.value}).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const onInsert = () => {
    let v:any = JSON.stringify(ruleForm.value);
    tableData.value.push(JSON.parse(v));
}

const onPrice = (index:number) => {
    tableData.value[index].price = tableData.value[index].unit_price * tableData.value[index].sums
}


const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 30, message: '范围在2-30字之间', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(id.value){
                request = http.patch('/material/details',{material_id:id.value,data:JSON.stringify(tableData.value)})
            }else{
                request = http.put('/material/details',{material_id:id.value,data:JSON.stringify(tableData.value)})
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    getData()
})

</script>
<style scoped>
.el-form{margin:0px auto;width: 1200px;height: calc(100vh - 25vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
.cell-item{font-size: 16px;}
.el-form-item{margin-top: 0px;margin-bottom: 8px;}
::v-deep .el-tabs__item{font-size: 18px !important;}

/* 全局移除 el-input 边框 */
.no-border-input {
/* 覆盖 Element Plus 的 CSS 变量 */
	--el-input-border-color: transparent;
	--el-input-focus-border-color: transparent;
	--el-input-hover-border-color: transparent;
}

/* 配合移除阴影 */
:deep(.no-border-input .el-input__inner) {
	box-shadow: none;
}
</style>
